<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="年级" prop="year">
        <el-select v-model="queryParams.year" clearable filterable placeholder="请选择年级" @change="getqueryFormclassList">
          <el-option
            v-for="dict in dict.type.year_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="班级" prop="classId">
        <el-select v-model="queryParams.classId" clearable filterable placeholder="请选择班级">
          <el-option
            v-for="item in classList"
            :key="item.id"
            :label="item.label"
            :value="item.id"
            size="small">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div ref="sports" style="height:520px" />


  </div>
</template>

<script>


import { selectClazz } from '@/api/base/clazz'
import { delTeachPlangarden } from '@/api/teach/teachPlan'
import echarts from "echarts";

export default {
  name: "gzt",
  dicts: ['year_type'],
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 显示搜索条件
      showSearch: true,
      classList:[],//班级
      // 总条数
      total: 0,
      sports:null,//
      sportsdata:[],
    };
  },
  created() {

  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList(){
      try {
        this.sports=echarts.init(this.$refs.sports);
        this.sportsdata=[{name:'小一班',value:'120',value2:'30'},{name:'小二班',value:'200',value2:'20'},{name:'小三班',value:'150',value2:'100'},{name:'小四班',value:'80',value2:'50'},{name:'小一班',value:'70',value2:'60'},{name:'小一班',value:'70',value2:'40'},{name:'小二班',value:'200',value2:'30'},{name:'小三班',value:'150',value2:'10'},{name:'小一班',value:'120',value2:'30'},{name:'小二班',value:'200',value2:'20'},{name:'小三班',value:'150',value2:'100'},{name:'小四班',value:'80',value2:'50'},{name:'小一班',value:'70',value2:'60'},{name:'小一班',value:'70',value2:'40'},{name:'小二班',value:'200',value2:'30'},{name:'小三班',value:'150',value2:'10'},{name:'小一班',value:'120',value2:'30'},{name:'小二班',value:'200',value2:'20'},{name:'小三班',value:'150',value2:'100'},{name:'小四班',value:'80',value2:'50'},{name:'小一班',value:'70',value2:'60'},{name:'小一班',value:'70',value2:'40'},{name:'小二班',value:'200',value2:'30'},{name:'小三班',value:'150',value2:'10'}]
        this.echartdata();
      }catch (e) {
        console.log(e)
      }
    },
    echartdata() {
      let that = this
      let legenddata=['步数','运动量'],zoomdata=[];
      //判断超过20条数据出现滚动条
      if(this.sportsdata.length>20){
        zoomdata=[{
          type: 'inside',
          show: true,
          xAxisIndex: [0],
          start: 0,//默认为1
          end:this.sportsdata.length<100?(this.sportsdata.length/10)*10:50,//默认为100
        },
          {
            type: 'slider',//slider表示有滑动块的，inside表示内置的
            start: 0,//默认为0  可设置滚动条从在后进行展示
            end: 50,//默认为100
            show: true,
            xAxisIndex: [0],
            handleSize: 0,//滑动条的 左右2个滑动条的大小
            height: 12,//组件高度
            left: '5%', //左边的距离
            right: '5%',//右边的距离
            bottom: -2,//右边的距离
            borderColor: "#f5f4f4",
            fillerColor: '#d7d5d5',
            backgroundColor: '#f5f4f4',//两边未选中的滑动条区域的颜色
            // showDataShadow: false,//是否显示数据阴影 默认auto
            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
            realtime: true, //是否实时更新
            filterMode: 'filter',
            handleStyle: {
              borderRadius: '20',
            },
          }]
      }
      this.sports.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },

        legend: {
          data:legenddata
        },
        dataZoom:zoomdata,
        xAxis: [
          {
            type: 'category',
            data:this.sportsdata.map(item=>{return item.name}),
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: legenddata[0],
            min: 0,
            max: 250,
            interval: 50,
            axisLine: {
              show: true,
              lineStyle: {
                color:'#5470C6'
              }
            },
            axisLabel: {
              formatter: '{value} 步'
            }
          },
          {
            type: 'value',
            name: legenddata[1],
            min: 0,
            max: 250,
            interval: 50,
            axisLine: {
              show: true,
              lineStyle: {
                color:'#91CC75'
              }
            },
            axisLabel: {
              formatter: '{value} S'
            }
          },

        ],
        series: [
          {
            name:legenddata[0],
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 步';
              }
            },
            barWidth:20,
            itemStyle: {
              normal: {
                //这里是颜色
                color: '#5470C6'
              }
            },
            data: this.sportsdata.map(item=>{return item.value})
          },
          {
            name:legenddata[1],
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' S';
              }
            },
            barWidth:20,
            itemStyle: {
              normal: {
                //这里是颜色
                color: '#91CC75'
              }
            },
            data: this.sportsdata.map(item=>{return item.value2})
          },

        ]
      })
    },
    /**班级*/
    async getqueryFormclassList(){
      try {
        let params={}
        if(this.queryParams.year) params.year = this.queryParams.year;
        const {rows}=await selectClazz(params);
        this.classList=rows.map(item=>{
          return {
            id:item.id,
            label:item.title,
          }
        })
      }catch (e) {
        console.log(e)
      }
    },
    /**班级*/
    async getFormclassList(){
      try {
        let params={}
        if(this.form.year) params.year = this.form.year;
        const {rows}=await selectClazz(params);
        this.classList=rows.map(item=>{
          return {
            id:item.id,
            label:item.title,
          }
        })
      }catch (e) {
        console.log(e)
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

  }
};
</script>
